<template>
    <div class="register-info">
        <div class="icon">
            <i class="el-icon-s-comment"></i>
        </div>
        <div class="title">
            注册【风珝聊天】在线聊天账号
        </div>
        <div class="warn">
            请在五分钟内完成注册信息,过时失效
        </div>
        <div class="form">
           <el-form ref="form" :model="form" label-width="80px" :rules="rules">
               <el-form-item label="账号" prop="email" class="email">
                    <el-input disabled v-model="form.email" placeholder="请输入您的邮箱"></el-input>
               </el-form-item>
               <el-form-item label="昵称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入昵称"></el-input>
               </el-form-item>
               <el-form-item label="密码" prop="pwd">
                    <el-input v-model="form.pwd" placeholder="请输入新密码"></el-input>
               </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="个性签名" prop="sign">
                    <el-input type="textarea" placeholder="请输入您的个性签名" v-model="form.sign"
                        maxlength="50" show-word-limit />
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload class="uploader" action="#" :http-request="uploadFile"
                    :show-file-list="false" accept="image/*">
                        <img v-if="avatar.img != '' " :src="avatar.img" class="avatar">
                        <i v-else class="el-icon-plus icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" @click="onSubmit">立即注册</el-button>
                </el-form-item>
           </el-form>
       </div>
    </div>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import axios from 'axios'

@Component
export default class RegisterInfo extends Vue {

    $message: any
    $notify: any

    // 表单数据
    public form:any = {
        name: '',
        email: '',
        pwd: '',
        gender: '男',
        sign: ''
    }

    // 表单验证规则
    public rules:any = {
        email: [
            { required: true, message: '请输入您的注册邮箱', trigger: 'blur' }
        ],
        name: [
            { required: true, min: 1, max: 16, message: '长度在 1 到 16个字符之间', trigger: 'change' }
        ],
        pwd:[
            { required: true, trigger: 'change', validator: this.validatePwd }
        ],
        sign:[
            { required: true, min: 0, max: 50, message: '长度在 0 到 50个字符之间', trigger: 'change' }
        ]
    }

    // 用户选择的本地图像文件
    public avatar = {
        img: '',
        file: null
    }

    beforeMount() {
        const shoartUrl = this.$route.params.randstr
        this.verifyShortUrl(shoartUrl) 
    }

     // 校验密码
    private validatePwd(rule:any, value:string, cb:Function){
        if(value.match(/^\w{6,16}$/g) == null){
            cb(new Error('密码应为6~16位的字母、数字、下划线组成'))
            return
        }
        cb()
    }

    // 上传文件
    public uploadFile(fileInfo:any){
        this.avatar.file = fileInfo.file
        this.avatar.img = URL.createObjectURL(fileInfo.file)
    }

    // 验证后端随机生成的短url是否合法
    private verifyShortUrl(surl: string){
        axios.post('/api/v1/user/reg_url_verify/' + surl)
            .then(res=>{
                if(res.data.code === 200){
                    this.form.email = res.data.data
                }else{
                    this.$notify.error(res.data.msg)
                    this.$router.replace("/")
                }
            }).catch(err=>{
                this.$notify.error("验证失败:" + err)
                this.$router.replace("/")
            })
    }

    // 提交信息
    public onSubmit(){
        if(this.form.email.match( /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/g) == null){
            this.$message.error("邮箱格式不正确")
            return
        }
        if(this.form.name.length < 1 || this.form.name.length > 16){
            this.$message.error("昵称长度应在 1 到 16个字符之间")
            return
        }
        if(this.form.pwd.match(/^\w{6,16}$/) == null){
            this.$message.error("密码应为6~16位的字母、数字、下划线组成")
            return
        }
        if(this.form.sign.length > 50){
            this.$message.error("个性签名长度应在50个字符之内")
            return
        }
        if(this.avatar.file == null){
            this.$message.error("您还未选择头像")
            return
        }
        const user = JSON.parse(JSON.stringify(this.form))
        user.gender = user.gender === '男' ? 1 : 0;
        const formData = new FormData()
        formData.append("image", <any>this.avatar.file)
        formData.append("user", new Blob([JSON.stringify(user)],{type: 'application/json'}))
        axios.post('/api/v1/user/register', formData)
            .then(res=>{
                if(res.data.code === 200){
                    this.$notify.success('注册成功,3秒后回到登录页。')
                    setTimeout(() => {
                        this.$router.push('/login?email=' + user.email)
                    }, 3000);
                }else{
                    this.$notify.error(res.data.msg)
                }
            }).catch(err=>{
                this.$message.error("操作失败:" + err)
            })
    }

}
</script>
<style lang="less">
@import '../css/index.less';
    .register-info{
        .float-win(#fdfdfd);
        margin-top: 20px;
        .email .el-input__inner{
            background-color: #F4F6F8;
        }
        .icon{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            color: @theme-color;
        }
        .title{
            text-align: center;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            color: @theme-color;
       }
       .warn{
           text-align: center;
           margin-bottom: 10px;
           font-size: 14px;
           color: red;
       }
       .uploader{
           .avatar{
               width: 100px;
               height: 100px;
           }
           .icon{
               height: 60px;
               width: 60px;
               color: #ccc;
               border: 1px dotted #dedede;
               font-size: 20px;
           }
       }
       .btn{
           .el-button{
               width: 100%;
               margin-left: -40px;
           }
       }
    }
</style>